<script setup lang="ts">
import { ref } from 'vue'

const money = ref(100)
const buy = (price: number) => {
    if (money.value >= price) {
        money.value -= price
    } else {
        alert('余额不足！')
    }
}

</script>

<template>
    <div id="app">
        <div class="box">
            <h3>自动售货机</h3>
            <button @click="buy(5)">可乐5元</button>
            <button @click="buy(10)">咖啡10元</button>
            <button @click="buy(8)">牛奶8元</button>
        </div>
        <p>银行卡余额：{{ money }}元</p>
    </div>
</template>

<style>
.box {
    border: 3px solid #000000;
    border-radius: 10px;
    padding: 20px;
    margin: 20px;
    width: 200px;
}

h3 {
    margin: 10px 0 20px 0;
}

p {
    margin: 20px;
}
</style>
